<template>
    <div>
        <h1>添加会员</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">姓名</td>
                    <td><input type="text" v-model="info.memberName"></td>
                </tr>
                <tr>
                    <td align="right">手机号码</td>
                    <td><input type="text" v-model="info.memberPhone"></td>
                </tr>
                <tr>
                    <td align="right">证件类型</td>
                    <td><select v-model="info.memberType" >
                        <option value="">请选择</option>
                        <option :value="item" v-for="item in getlist">{{ item }}</option>
                    </select></td>
                </tr>
                <tr>
                    <td align="right">证件号码</td>
                    <td><input type="text" v-model="info.memberCard"></td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td>
                        <input type="radio" name="sexs" :value="0" v-model="info.memberSex">男
                        <input type="radio" name="sexs" :value="1" v-model="info.memberSex">女
                    </td>
                </tr>
                <tr>
                    <td align="right">生日</td>
                    <td><input type="date" v-model="info.memberTime"></td>
                </tr>
                <tr>
                    <td align="right">职业</td>
                    <td>
                        <select v-model="info.roleId">
                        <option value="">请选择</option>
                        <option :value="item.roleId" v-for="item in getselect">{{ item.roleName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">详细地址</td>
                    <td><input type="text" v-model="info.memberAddress"></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="重置" class="btn btn-default" @click="del" >
                        <input type="button" value="确定" class="btn btn-primary" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from 'axios'
import {useRouter,useRoute} from "vue-router";
onMounted(()=>
{
    getseletes();
})
const router=useRouter();
const route=useRoute();
let getlist:any=ref(['身份证','军官证','护照']);
let getselect:any=ref([]);
const getseletes=()=>
{
    axios({
        url:'http://localhost:5235/api/Member/GetRoles',
        method:"get",
    })
    .then((res)=>
    {
        console.log(res);
        getselect.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let info:any=reactive({
        "memberName": "",
        "memberPhone": "",
        "memberType": "",
        "memberCard": "",
        "memberSex": "",
        "memberTime": "",
        "roleId": "",
        "memberAddress": "",
})
const add=()=>
{
    if(info.memberName=="")
    {
        alert("姓名不能为空");
        return;
    }
    if(info.memberPhone=="")
    {
        alert("手机号码不能为空");
        return;
    }
    if(info.memberCard=="")
    {
        alert("身份证号不能为空");
        return;
    }
    if(info.memberTime=="")
    {
        alert("生日不能为空");
        return;
    }
    if(info.memberAddress=="")
    {
        alert("详细地址不能为空");
        return;
    }
    axios({
        url:'http://localhost:5235/api/Member/Add',
        method:"post",
        data:info
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data==-1)
        {
            alert("用户名不唯一");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            router.push("/memberShow")
            return;
        }
        else
        {
            alert("添加失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const del=()=>
{
    info.memberSex="",
    info.memberType="",
    info.roleId=""
}
</script>

<style scoped>

</style>